<template>
  <div class='MostExpected'>
    <h1>近期最受欢迎</h1>
    <div id="scroll">
      <ul>
        <li v-for="item in expectedList" :key="item.index">
          <img :src="item.img" alt="" />
          <h2>{{ item.nm }}</h2>
          <h3>{{ item.wish }}人想看</h3>
          <h3>{{ item.comingTitle }}</h3>
        </li>
      </ul>
    </div>
        <div class="one">2022年待定</div>
  </div>
</template>

<script>
export default {
  name : 'mostExpected',
  data(){
    return{
      expectedList:[]
    }
  },
  mounted() {
    this.axios.get('index/mostExpected').then((re)=>{
      this.expectedList = re.data.coming
      console.log(this.expectedList)
  })
}
}
</script>

<style scoped>
::-webkit-scrollbar{
  display:none;
}
.MostExpected {
  margin: 0 15px;
  overflow: scroll;
  overflow-x:hidden;
}
.one{
  font-weight: 700;
  font-size: 18px;
}
h1{
  font-size: 18px;

}
h2 {
  /*padding: 15px 15px 15px 0;*/
  font-size: 18px;
  font-weight: 700;
}
#scroll {
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
  height: 200px;

}

ul {
  display: flex;

}
li {
  width: 80px;
  height: 120px;
  margin-right: 30px;
}
img {
  width: 100px;
  height: 130px;
}
h2 {

  font-size: 14px;
  line-height: 30px;
}

h3 {
  color: #666;
  font-size: 12px;
}

</style>
